<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
	<link rel="stylesheet" href="../../../css/layuicms_public.css" media="all" />
    <link rel="stylesheet" href="../../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
		<!--搜索开始-->
		        <fieldset class="layui-elem-field layuimini-search">
		            <legend>搜索信息</legend>
		            <div style="margin: 10px 10px 10px 10px">
		                <form class="layui-form layui-form-pane" action="" id="searchFrm">
		                    <div class="layui-form-item">
		                        <div class="layui-inline">
		                            <label class="layui-form-label">供应商</label>
		                            <div class="layui-input-inline">
		                                <select name="providerid" class="providerSel">
											<option value ="">请选择供应商</option>
										</select>
		                            </div>
		                        </div>
		                        <div class="layui-inline">
		                            <label class="layui-form-label">商品名称</label>
		                            <div class="layui-input-inline">
		                                <select name="goodsid" class="goodsSel">
		                            		<option value ="">请选择商品名称</option>
		                            	</select>
		                            </div>
		                        </div>
		                        <div class="layui-inline">
		                        	<label class="layui-form-label">开始时间</label>
		                        	<div class="layui-input-inline">
		                        		<input type="tel" name="startTime" id="startTime" readonly="readonly" placeholder="yyyy-MM-dd HH:mm:ss" class="layui-input">
		                        	</div>
		                        </div>
		                        <div class="layui-inline">
		                        	<label class="layui-form-label">结束时间</label>
		                        	<div class="layui-input-inline">
		                        		<input type="tel" name="endTime" id="endTime" readonly="readonly" placeholder="yyyy-MM-dd HH:mm:ss" class="layui-input">
		                        	</div>
		                        </div>
							</div>
							
							<div class="layui-form-item">
		                        <div class="layui-block" style="text-align: center;">
		                            <a class="layui-btn " lay-submit=""  lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
									<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
		                        </div>
		                    </div>
		                </form>
		            </div>
		        </fieldset>
				<!--搜索结束-->

		
		<!--表格开始-->
		<table class="layui-hide" id="inportTable" lay-filter="inportTable"></table>
		<div style="display: none;" id="inportToolBar">
			<a class="layui-btn layui-btn-sm btn_add" lay-event="add">添加</a>
		</div>
		<div style="display: none;" id="inportTableBar">
			<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete btn_update" lay-event="update">修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete btn_delete" lay-event="delete">删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete btn_back" lay-event="back">退货</a>
		</div>
		<!--表格结束-->
		
		<!--添加和修改的弹出层开始-->
		<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
			<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
			   <div class="layui-form-item">
				   <div class="layui-inline">
						<label class="layui-form-label">供应商</label>
						<div class="layui-input-inline">
								<input type="hidden" name="id" />
								<select name="providerid" id="data_providerid" lay-filter="data_providerid" class="providerSel">
									<option value ="">请选择供应商</option>
								</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">商品名称</label>
						<div class="layui-input-inline">
						   <input type="hidden" name="id" />
							   <select name="goodsid" id="data_goodsid" class="goodsDataSel">
								 <option value ="">请选择商品</option>
							   </select>
						</div>
					</div>
			  </div>	
			   <div class="layui-form-item">
				   <div class="layui-inline">
					   <label class="layui-form-label">进货数量</label>
					   <div class="layui-input-inline">
						   <input type="hidden" name="id">
						   <input type="text" class="layui-input" name="number" lay-verify="required" placeholder="请输入进货数量">
					   </div>
				   </div>
				   <div class="layui-inline">
					   <label class="layui-form-label">进货价格</label>
					   <div class="layui-input-inline">
						   <input type="text" class="layui-input" name="inportprice" lay-verify="required" placeholder="请输入进货价格">
					   </div>
				   </div>
			   </div>
	   
			   <div class="layui-form-item">
				   <div class="layui-inline">
					   <label class="layui-form-label">支付类型</label>
					   <div class="layui-input-block">
						   <input type="radio" name="paytype" value="微信" title="微信" checked="">
						   <input type="radio" name="paytype" value="支付宝" title="支付宝" >
						   <input type="radio" name="paytype" value="银联" title="银联" >
					   </div>
				   </div>
			   </div>
			   <div class="layui-form-item">
				   <label class="layui-form-label">备注</label>
				   <div class="layui-input-block">
					   <textarea placeholder="请输入备注" name="remark" id="remark" class="layui-textarea"></textarea>
				   </div>
			   </div>
			   <div class="layui-form-item">
					<div class="layui-input-block" style="text-align: center;">
						<a class="layui-btn " lay-submit=""  lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
						<a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
					</div>
				</div>
			</form>
		</div>
		<!--添加和修改的弹出层结束-->

		<!-- 退货的弹出层开始 -->
		<div id="backGoodsDiv" style="display: none;padding: 0.3125rem">
			<form method="post" class="layui-form layui-form-pane" lay-filter="dataBackFrm" id="dataBackFrm">
			   <div class="layui-form-item">
					<label class="layui-form-label">退货数量</label>
					<div class="layui-input-block">
						<input type="hidden" name="goodsid" id="back_goodsid" />
						<input type="hidden" name="salesid" id="salesid" />
						<input type="text" name="number"  lay-verify="required|number|checkgoodsnumber" autocomplete="off" class="layui-input">
					</div>
			   </div>
			   <div class="layui-form-item">
				   <label class="layui-form-label">退货原因</label>
				   <div class="layui-input-block">
					   <textarea placeholder="请输入退货原因" name="remark" id="remark" class="layui-textarea"></textarea>
				   </div>
			   </div>
			   <div class="layui-form-item">
					<div class="layui-input-block" style="text-align: center;">
						<a class="layui-btn " lay-submit=""  lay-filter="doBackSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
						<a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataBackFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
					</div>
				</div>
			</form>
		</div>
		<!-- 退货的弹出层结束 -->
    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/api.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','layer','upload'], function () {
        var form = layui.form;
        var table = layui.table;
		var laydate=layui.laydate;
		var layer=layui.layer;
		var upload = layui.upload;
		
		//初始化时间选择器
		laydate.render({
			elem:'#startTime',
			type:'datetime'
		});
		laydate.render({
			elem:'#endTime',
			type:'datetime'
		});

      var tableIns=table.render({
            elem: '#inportTable',
            url: api+'inport/loadAllInport',
			toolbar:"#inportToolBar",
			cellMinWidth:true,
            cols: [[
                {field:'id', title:'进货ID',align:'center'}
				,{field:'providername', title:'供应商',align:'center'}
                ,{field:'goodsname', title:'商品名称',align:'center'}
				,{field:'size', title:'商品规格',align:'center'}
                ,{field:'paytype', title:'支付类型',align:'center'}
				,{field:'inporttime', title:'进货时间',align:'center',width:160}
				,{field:'operateperson', title:'操作员',align:'center'}
                ,{field:'inportprice', title:'进货价格(￥)',align:'center'}
                ,{field:'number', title:'进货数量',align:'center'}
                ,{field:'remark', title:'备注',align:'center'}
                ,{title: '操作', templet: '#inportTableBar', fixed: "right", align: "center",width:160}
            ]]
			,done: function(res, curr, count){ //处理删除某一页最后一条数据的BUG
				if(res.data.length==0&&curr!=1){
					tableIns.reload({
						page:{
							curr:(curr-1)
						}
					});
				}
			},page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
			var params= $("#searchFrm").serialize();
            //执行搜索重载
            table.reload('inportTable', {
                page: {
                    curr: 1
                }
                ,url:api+'inport/loadAllInport?'+params
            });
            return false;
        });

		//监听表头的事件
		table.on('toolbar(inportTable)', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
			case 'add':
				openAddInport();
				break;
		  };
		});
		
		//监听行数据的事件
		table.on('tool(inportTable)', function (obj) {
			var data = obj.data;
			if (obj.event === 'delete') {
				layer.confirm('真的删除这条数据么', function (index) {
					$.post(api+"inport/deleteInport",{id:data.id},function(res){
						layer.msg(res.msg);
						obj.del();
						layer.close(index);
					})
				});
			}else if(obj.event === 'update'){
				openUpdateInport(data);
			}else if(obj.event === 'back'){
				openBack(data);
			}
		});
		
		//监听providerid反选goodsid
		form.on("select(data_providerid)",function(obj){
			var providerid=obj.value;
			var goodsDataSel = $(".goodsDataSel");
			initGoodsSelected(providerid,goodsDataSel)
		})
		 

		//打开添加进货信息的弹层
		var mainIndex;
		var url;  //动态的url
		function openAddInport(){
			mainIndex=layer.open({
				type:1,
				title:'添加进货信息',
				content:$("#addOrUpdateDiv"),
				area:['800px','500px'],
				success:function(index){
					$("#data_providerid").attr("disabled",false);
					$("#data_goodsid").attr("disabled",false);
					url=api+"inport/addInport";
					//重置表单
					$("#dataFrm")[0].reset();
					
				}
			});	
		}
		
		function openUpdateInport(data){
			mainIndex=layer.open({
				type:1,
				title:'修改进货信息',
				content:$("#addOrUpdateDiv"),
				area:['800px','600px'],
				success:function(index){
					url=api+"inport/updateInport";
					//获取供应商的id
					var providerid = data.providerid;
					var goodsDataSel = $(".goodsDataSel");
					initGoodsSelected(providerid,goodsDataSel,function(){
						//装载数据表格
						form.val("dataFrm",data);
					});
					//禁止修改供应商和商品
					$("#data_providerid").attr("disabled",true);
					$("#data_goodsid").attr("disabled",true);
				}
			});	
		}
		
		//提交数据
		form.on("submit(doSubmit)",function(data){
			var params= $("#dataFrm").serialize();
			$.post(url,params, function(res){
				layer.msg(res.msg);
				if(res.code==200){
					tableIns.reload();
				}
				layer.close(mainIndex);
			})
			return false;
		})
		
		//退货提交数据
		form.on("submit(doBackSubmit)",function(data){
			var params= $("#dataBackFrm").serialize();
			$.post(api+"outport/addOutport",params,function(res){
				if(res.code==200){
					tableIns.reload();
				}
				layer.msg(res.msg);
				layer.close(mainIndex);
			})
			return false;
		})

		//初始化加载所有的供应商下拉款
		function initGoodsSelected(providerid,elem,fun){
			var html="<option value =''>请选择商品</option>";
			if(providerid!=""){
				$.get(api+"goods/getGoodsByProviderId",{providerid:providerid},function(res){
					var data = res.data;
					$.each(data,function(index,item){
						html+="<option value ="+item.id+">"+item.goodsname+"("+item.size+")"+"</option>"
					});
					elem.html(html);
					form.render("select");
					if(fun!=undefined){
						fun();
					}
				})
			}
			else{
				elem.html(html);
				form.render("select");
			}
		}
		
		//加载查询条件里面的供应商的下拉列表
		$.get(api+"provider/getAllAvailableProvider",function(res){
			var search_providerid=$(".providerSel");
			var html="<option value =''>请选择供应商</option>";
			var data=res.data;
			$.each(data,function(index,item){
				html+="<option value ="+item.id+">"+item.providername+"</option>"
			});
			search_providerid.html(html);
			form.render("select");
		});

		//加载查询条件里面的商品的下拉列表
		$.get(api+"goods/getAllAvailableGoods",function(res){
			var search_goodsid=$(".goodsSel");
			var html="<option value =''>请选择商品名称</option>";
			var data=res.data;
			$.each(data,function(index,item){
				html+="<option value ="+item.id+">"+item.goodsname+"("+item.size+")"+"</option>"
			});
			search_goodsid.html(html);
			form.render("select");
		});
		
		//打开退货的弹出层
		function openBack(data){
			mainIndex=layer.open({
				type:1,
				content:$("#backGoodsDiv"),
				area:['800px','500px'],
				title:'商品退货',
				success:function(){
					$("#dataBackFrm")[0].reset();
					//装载新的数据
					form.val("dataBackFrm",data);
					form.val("dataBackFrm",{number:'', inportid:data.id});
				}
			});
		}
		
		form.verify({
		  checkgoodsnumber: function(value, item){ //value：表单的值、item：表单的DOM对象
			var str;
			var goodsid=$("#back_goodsid").val();
			$.ajax({
				url:api+"goods/getGoodsByGoodId?goodsid="+goodsid,
				type:'get',
				async:false,
				success:function(res){
					if(res.data.number<value){
						str="退货数量不能大于当前商品库存";
					}
				}
			})
			return str;
		  }
		});   

		
    });
</script>
<script>

</script>

</body>
</html>